﻿<!doctype html>
<html>
 <head>
  <title>注册页面</title>
  <meta charset="utf-8"/>
  <!--<link rel="stylesheet" href="./zhu.css">-->
  <style>
 *{margin:0px;padding:0px;}
#big{
	 width:100%;
	 height:1000px;
	 border:0px solid blue;
	 margin:20px auto;
	}

#b{width:100%;height:50px;}

#middle{
		width:100%;
		height:650px;
		border:0px solid red;
		}
.zqr{
margin-left:30px;}

#z1{width:450px;
	height:70px;
	margin-top:40px;
	border:0px solid red;
	}

#z2{width:450px;
	height:70px;
	border:0px solid red;float:left;
	
	}
#right
	{
		float:left;
		width:600px;
		height:520px;
		border:0px solid red;
		margin-top:-515px;
		margin-left:15%;font-size:12px;
		}
#left{
	margin-left:15%;
	margin-top:50px;
	width:500px;height:400px;border:0px solid red;
}

a{text-decoration:none;}


#db{
	width:100%;
	height:50px;
	border:0px solid red;
	line-height:50px;
	}
  p{
	margin-left:43%;
	font-size:15px;
	}
#jy{
	width:100%;
	height:50px;
	border:0px solid red;
	}
.p1{
	margin-left:40%;font-size:10px
	}
.p3{
	float:right;
	margin-right:15px;
	display:inline-block;
	}
#rl{
	width:100%;
	height:10px;
	border:0px solid blue;
	}
	.a{font-size:30px;
	margin:20px;}
	.a input{
		font-size:13px;
	}
	.b{margin-left:155px ;}
	.c{margin-left:180px;margin-top:30px;}
	.bj
		{	width:100%;
			height:40px;
			
			border:0px solid red;
			
			background:#1F81B0;
		}
		ul
		{
			
			
			list-style-type:none;
		}
		li
		{
			float:left;font-size:1em;margin-left:35px;margin-top:10px;color:white;
		}
		li a{text-decoration:none;color:white;}
		.tb{width:100%;height:30px;border:0px solid red;}

		#top
	{
		width:100%;
		height:280px;
		border:0px solid red;
	}
	#tt{width:100%;height:30px;border:0px solid red;}
	.t1{color:#909090;float:left;font-size:1.3em;}
	.t2{color:#909090;float:right;font-size:1.3em;}
	td{font-size:1.7em;font-weight:bold;}
	#dh{width:100%;height:50px;border:0px solid red;background-color:#1F81B0;}

	ul{list-style-type:none;height:50px;}

	ul li{float:left;margin:10px;margin-left:20px;line-height:30px;color:white;}

	li a{text-decoration:none;color:white;}

	.d1{width:100%;height:50px;border:0px solid red;line-height:50px;}
	.d2{margin-left:50px;}
	.m1{font-size:15px;}
	.sp{display:inline-block;background:url('../img/reg_icons.png') no-repeat 0px 0px scroll;width:50px;border:0px solid red;height:20px;font-size:0.6em;}
	#yzm{display:inline-block;background:#a7a7a7;text-align:center;letter-spacing:2px;}
		</style>
 </head>

 <body>
 <form action="do-regist.php" method="post" name="form" onsubmit="return check()">
	 <div id="big">
			<div id="top">
		<div id="tt">
			<div class="t1"><a href="./index.php">网站首页</a>|用户中心|我的购物车(0|)我的订单(0)</div>
			<div class="t2">欢迎来到欣才商城!您好，Admin!|<a href="./login.php">登录|</a><a href="./regist.php">免费注册|</a><a href="./index.php">>退出</a</div>
		</div>
		
<hr color="#e3e3e3" style="clear:both;"/>
		<div id="b">
			<table width="500px" height="30px">
				<tr>
					<td><font color="#4577fc" style="margin-left:50px;">欣才</font></td>
					<td>商城</td>
					<td>
						<input type="text" name="" style="height:27px;"/>
						<input type="submit" name="sub" value="搜索" style="height:32px;" />
					</td>
				</tr>
			</table>
		</div>
		<div id="dh">
			<ul>
				<li><a href="./index.php">首页</a></li>
				<li>|</li>
				<li><a href="./index.php">商城</a></li>
				<li>|</li>
				<li><a href="./news.php?cid=32">新闻</a></li>
				<li>|</li>
				<li><a href="">活动</a></li>
				<li>|</li>
				<li><a href="">论坛</a></li>
			</ul>
		</div>

	<div id="middle">
		<div id="left">
		  <div>
			<img src="../img/1.png" height="400px" width="450px">
		  </div>
		  <div id="z1">
			  <font class="zqr" size=5 color="#5c5c5c">
			  知其然知其所以然!
			  </font>
		  </div>
		  <div id="z2">
			<font color="#919191" class="zqr">通过我们的实战项目，您可以更全面的理解软件工程</font>
		  </div>
		</div>

		  <div id="right">
				<table width="600px" height="500px" border=0 cellspacing=0>
					<tr>
						<td ><font style="margin-left:100px;">账户</font></td>
						<td colspan=2><input type="text" name="usname" value="" style="width:280px;height:28px;" placeholder="请输入6-14位数字字母组成的用户名"><font color="red">*</font><span id="tip_u" class="sp"></span></td>	
					</tr>
					<tr>
						<td><font style="margin-left:100px;">密码</font></td>
						<td colspan=2><input type="password" name="pwd" value="" style="width:280px;height:28px;" placeholder="请输入6-10位数字字母组成的密码"/><font color="red">*</font><span id="tip_p" class="sp"></span></td>	
					</tr>
					<tr>
						<td><font style="margin-left:100px;">确认密码</font></td>
						<td colspan=2><input type="password" name="repwd" value="" style="width:280px;height:28px;" placeholder="请确认密码"/><font color="red">*</font><span id="tip_q" class="sp" style="width:81px;"></span></td>
					</tr>
					<tr>
						<td><font style="margin-left:100px;">手机号</font></td>
						<td colspan=2><input type="text" name="phone" style="width:280px;height:28px;" placeholder="请输入大陆手机号"/><font color="red">*</font><span id="tip_m" class="sp"></span></td>	
					</tr>
					<tr>
						<td><font style="margin-left:100px;">邮箱</font></td>
						<td colspan=2><input type="text" name="email" style="width:280px;height:28px;" placeholder="请输入正确邮箱"/><span id="tip_e" class="sp"></span></td>
					</tr>
					<tr>
						<td><font style="margin-left:100px;">验证码</font></td>
						<td><input type="text" name="yzm" style="width:130px;height:28px;" value=""/><span id="yzm1">aaaa</span><font color="red">*</font><span id="tip_y" class="sp"></span></td>
		
					</tr>
					<tr>
						<td></td>
						<td><input type="checkbox" name="check2" value="接受"/>接受<font color="#60ffff">欣才服务条款</font></td>
					</tr>
					<tr>
						<td colspan=2><hr color="#f1f1f1"/></td>
					</tr>
					<tr>
						<td></td>
						<td><input type="submit" name="sub" value="注册" style="width:150px;height:35px;"/></td>
					</tr>
				</table>
		</div>
	</div>
	
	<div>
		<hr color="#e5e5e5"/>
	</div>
	<div id="db">
		<p>关于我们|法律声明|工作机会|联系我们
		</p>
	</div>
	<div id="jy">
		<p class="p1">Copyright@2013 Thinksite Co.Let night reserved 经营许可证编号：苏A-12345678</p>
	</div>
	<div id="rl"><hr color="#d0d0d0"/><div>
 </div>
</div>
</form>
<script type="text/javascript">
	tip_u=document.getElementById("tip_u");
	tip_p=document.getElementById("tip_p");
	tip_q=document.getElementById("tip_q");
	tip_m=document.getElementById("tip_m");
	tip_e=document.getElementById("tip_e");
	tip_y=document.getElementById("tip_y");
	
	
function checkValue(obj,tip,preg,empty=false)
	{
		if(empty===false)
			{
				if(obj.value=="")
				{
					tip.style.width="80px";
					tip.style.backgroundPosition="0px 0px";
					tip.style.color="red";
					tip.innerHTML="不能为空";
				}
				else
				{
					if(preg.test(obj.value))
					{
						tip.innerHTML="";
						tip.style.width="16px";
						tip.style.height="16px";
						tip.style.backgroundPosition="-79px 0px";
					}
					else
					{
						tip.innerHTML="";
						tip.style.width="16px";
						tip.style.height="16px";
						tip.style.backgroundPosition="-79px -24px";
					}
				} 
			}
	
		else//邮箱
		{
			if(obj.value!="")
			{
				if(preg.test(obj.value))
				{
					tip.innerHTML="";
					tip.style.width="16px";
					tip.style.height="16px";
					tip.style.backgroundPosition="-79px 0px";
				}
				else
				{
					tip.innerHTML="";
					tip.style.width="16px";
					tip.style.height="16px";
					tip.style.backgroundPosition="-79px -24px";
				}		
			}
		}
	}
	//用户名
		preg_u=/^\w{6,14}$/;
		form.usname.onblur=function()
		{
			checkValue(form.usname,tip_u,preg_u);
		}
		//密码
		preg_p=/^[0-9a-zA-Z]{6,14}$/;
		form.pwd.onblur=function()
		{
			checkValue(form.pwd,tip_p,preg_p);
		}
	form.repwd.onblur=function()
	{
		if(form.repwd.value=="")
		{
			tip_q.style.color="red";
			tip_q.innerHTML="不能为空";
		}
		else
		{
			if(form.repwd.value!=form.pwd.value)
			{
				tip_q.style.width="80px";
				tip_q.style.color="red";
				tip_q.innerHTML="密码不一致";
			}
			else
			{
				tip_q.innerHTML="";
				tip_q.style.width="16px";
				tip_q.style.height="16px";
				tip_q.style.backgroundPosition="-79px 0px";
			}
		}
		
	}
		//手机号
			preg_m=/^1[3-9]\d{9}$/;
			form.phone.onblur=function()
			{
				checkValue(form.phone,tip_m,preg_m);
			}
		//邮箱
		preg_e=/^[\w\-]+@[\w\-]+\.[\w\-]+$/;
		form.email.onblur=function()
		{
			checkValue(form.email,tip_e,preg_e,true)
		}
		

	yzm1=document.getElementById("yzm1");
	getyzm();//初始化验证码
	function getyzm()
	{
		arr=['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z',1,2,3,4,5,6,7,8,9,0];
		yyy="";
		for(i=1;i<5;i++)
		{
			key=Math.round(Math.random()*(arr.length-1));
			yyy=yyy+arr[key];
		}
		yzm1.innerHTML=yyy;
	}
	
	yzm1.onclick=function()
	{
		getyzm();
	}
		//验证码的验证
	form.yzm.onblur=function()
	{
		if(this.value.toLowerCase()==yyy.toLowerCase())
		{
			tip_y.innerHTML="";
			tip_y.style.width="16px";
			tip_y.style.height="16px";
			tip_y.style.backgroundPosition="-79px 0px";
		}
		else
		{
			tip_y.innerHTML="";
			tip_y.style.width="16px";
			tip_y.style.height="16px";
			tip_y.style.backgroundPosition="-79px -24px";
		}		
	}
	check2=document.getElementsByName("check2");
	function check()
	{
		if(form.usname.value==""||form.pwd.value==""||form.repwd.value==""||form.phone.value==""||form.yzm.value=="")
		{
			alert("用户名,密码,确认密码,手机号和验证码不能为空");
			return false;
		}
		if(check2[0].checked!=true)
		{
			alert("请接受欣才服务条款");
			return false;
		}
		return true;
	}
</script>
 </body>
</html>